<template>
    <fieldset>
        <legend>常用的api</legend>
        <h2 id="hh">{{msg}}</h2>
        <button @click="handleClick">点鸡</button>
        <input type="text" ref="ipt">
        <Child ref='child' />
    </fieldset>
</template>
<script>
    //ref 

    //在vue里面操作dom 自定义指令 ref
    //1.作用元素上,可以获取dom元素对象的引用
    //2.作用在子组件上,可以获取子组件实例(instance)的引用

    //获取焦点的方法 focus

    import Child from './10.Child.vue';
    export default {
        methods: {
            handleClick() {
                console.log(this.$refs) //获取ref引用
                this.$refs.ipt.focus()
                //修改子组件的数据
                // this.$refs.child.msg = '被父组件修改了'
                console.log(this.$refs.child.msg)

                //nextTick 获取数据更新之后的dom元素
                console.log(document.getElementById('hh').innerText)
                this.msg = '被修改了'
                // this.$nextTick(() => {
                //     console.log(document.getElementById('hh').innerText)
                // })
                
                //vue会依次使用 mutationObserver Promise setImmediate setTimeout
                setTimeout(() => { 
                    console.log(document.getElementById('hh').innerText)
                })
            }
        },
        data() {
            return {
                msg: "他父亲"
            }
        },
        components: { Child }
    }
</script>